<template>
	<view class="container">
		<!-- 加载状态 -->
		<u-loading :show="loading" text="加载中..."></u-loading>
		
		<!-- 头部标题 -->

		<!-- 搜索栏 -->
		<view class="search-section" v-if="showSearch">
			<view class="search-box">
				<u-icon name="search" size="20" color="#999"></u-icon>
				<input 
					class="search-input" 
					placeholder="搜索商品名称"
					v-model="searchKeyword"
					@input="handleSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
					<u-icon name="close-circle-fill" size="16" color="#ccc"></u-icon>
				</view>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section" v-if="showFilter">
			<view class="filter-tabs">
				<view 
					v-for="(item, index) in filterTabs" 
					:key="index"
					class="filter-tab"
					:class="{ active: activeFilterTab === index }"
					@click="switchFilterTab(index)"
				>
					{{item.name}}
				</view>
			</view>
		</view>

		<!-- 数据表格 -->
		<view class="table-container">
			<!-- 表头 -->
			<view class="table-header">
				<view class="table-cell header-cell sequence">序号</view>
				<view class="table-cell header-cell product-name">商品名称</view>
				<view class="table-cell header-cell purchase-count">采购件数</view>
				<view class="table-cell header-cell return-count">退货件数</view>
			</view>

			<!-- 表格内容 -->
			<scroll-view 
				class="table-content" 
				scroll-y="true"
				@scrolltolower="loadMore"
				:refresher-enabled="true"
				:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
			>
				<view 
					v-for="(item, index) in displayList" 
					:key="item.id"
					class="table-row"
					:class="{ 'row-even': index % 2 === 1 }"
					@click="handleRowClick(item)"
				>
					<view class="table-cell sequence">
						<text class="sequence-text">{{ String(item.sequence).padStart(2, '0') }}</text>
					</view>
					<view class="table-cell product-name">
						<text class="product-name-text">{{ item.productName }}</text>
					</view>
					<view class="table-cell purchase-count">
						<text class="count-text">{{ formatNumber(item.purchaseCount) }}</text>
					</view>
					<view class="table-cell return-count">
						<text class="count-text return-text">{{ formatNumber(item.returnCount) }}</text>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">
					<u-loading v-if="loadingMore" mode="circle" size="24"></u-loading>
					<text class="load-more-text">{{ loadingMore ? '加载中...' : '上拉加载更多' }}</text>
				</view>

				<!-- 没有更多数据 -->
				<view class="no-more" v-if="!hasMore && displayList.length > 0">
					<text class="no-more-text">没有更多数据了</text>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="!loading && displayList.length === 0">
					<u-icon name="inbox" size="64" color="#ccc"></u-icon>
					<text class="empty-text">暂无数据</text>
					<view class="empty-btn" @click="refreshData">
						<text class="empty-btn-text">重新加载</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 统计信息 -->
		<view class="summary-section" v-if="displayList.length > 0">
			<view class="summary-item">
				<text class="summary-label">总商品数:</text>
				<text class="summary-value">{{ totalProducts }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">总采购件数:</text>
				<text class="summary-value">{{ formatNumber(totalPurchase) }}</text>
			</view>
			<view class="summary-item">
				<text class="summary-label">总退货件数:</text>
				<text class="summary-value return-text">{{ formatNumber(totalReturn) }}</text>
			</view>
		</view>

		<!-- 浮动操作按钮 -->
		<!--
		<view class="fab-container">
			<view class="fab-btn" @click="toggleSearch">
				<u-icon name="search" size="24" color="#fff"></u-icon>
			</view>
			<view class="fab-btn" @click="exportData">
				<u-icon name="download" size="24" color="#fff"></u-icon>
			</view>
		</view>
		-->

		<!-- 商品详情弹窗 -->
		<u-popup 
			v-model="showDetailPopup" 
			mode="bottom" 
			height="60%"
			border-radius="20"
		>
			<view class="detail-popup">
				<view class="popup-header">
					<text class="popup-title">商品详情</text>
					<view class="popup-close" @click="showDetailPopup = false">
						<u-icon name="close" size="20" color="#666"></u-icon>
					</view>
				</view>
				
				<view class="popup-content" v-if="selectedItem">
					<view class="detail-item">
						<text class="detail-label">序号:</text>
						<text class="detail-value">{{ String(selectedItem.sequence).padStart(2, '0') }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">商品名称:</text>
						<text class="detail-value">{{ selectedItem.productName }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">商品编码:</text>
						<text class="detail-value">{{ selectedItem.productCode }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">采购件数:</text>
						<text class="detail-value">{{ formatNumber(selectedItem.purchaseCount) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">退货件数:</text>
						<text class="detail-value return-text">{{ formatNumber(selectedItem.returnCount) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">净销售件数:</text>
						<text class="detail-value">{{ formatNumber(selectedItem.netSales) }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">更新时间:</text>
						<text class="detail-value">{{ selectedItem.updateTime }}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import storeDataMixin from '../../mixins/storeDataMixin'

export default {
	name: 'StoreDataPage',
	mixins: [storeDataMixin],
	data() {
		return {
			showSearch: false,
			showFilter: false,
			showDetailPopup: false,
			selectedItem: null
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 切换搜索显示
		toggleSearch() {
			this.showSearch = !this.showSearch
			if (!this.showSearch) {
				this.clearSearch()
			}
		},

		// 行点击事件
		handleRowClick(item) {
			this.selectedItem = item
			this.showDetailPopup = true
		},

		// 导出数据
		exportData() {
			this.handleExport()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f6fa;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
	
	.back-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		width: 40px;
	}
}

.search-section {
	padding: 15px 20px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border-radius: 20px;
		padding: 8px 15px;
		
		.search-input {
			flex: 1;
			margin-left: 10px;
			font-size: 14px;
			color: #333;
		}
		
		.search-clear {
			margin-left: 10px;
		}
	}
}

.filter-section {
	padding: 10px 20px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
	
	.filter-tabs {
		display: flex;
		
		.filter-tab {
			flex: 1;
			text-align: center;
			padding: 8px 12px;
			border-radius: 16px;
			font-size: 12px;
			color: #666;
			margin: 0 4px;
			
			&.active {
				background-color: #2196F3;
				color: #fff;
			}
		}
	}
}

.table-container {
	flex: 1;
	background-color: #fff;
	margin: 10px 20px 20px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.table-header {
	display: flex;
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
	
	.header-cell {
		font-weight: bold;
		color: #495057;
		font-size: 14px;
		background-color: #f8f9fa;
	}
}

.table-content {
	max-height: calc(100vh - 300px);
}

.table-row {
	display: flex;
	border-bottom: 1px solid #f0f0f0;
	
	&.row-even {
		background-color: #fafbfc;
	}
	
	&:active {
		background-color: #e3f2fd;
	}
}

.table-cell {
	padding: 15px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	
	&.sequence {
		flex: 0 0 60px;
		
		.sequence-text {
			font-size: 14px;
			color: #666;
			font-weight: 500;
		}
	}
	
	&.product-name {
		flex: 1;
		justify-content: flex-start;
		padding-left: 15px;
		
		.product-name-text {
			font-size: 14px;
			color: #333;
		}
	}
	
	&.purchase-count,
	&.return-count {
		flex: 0 0 80px;
		
		.count-text {
			font-size: 14px;
			color: #333;
			font-weight: 500;
		}
		
		.return-text {
			color: #f44336;
		}
	}
}

.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	
	.load-more-text {
		margin-left: 10px;
		font-size: 12px;
		color: #999;
	}
}

.no-more {
	display: flex;
	justify-content: center;
	padding: 20px;
	
	.no-more-text {
		font-size: 12px;
		color: #999;
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	
	.empty-text {
		margin: 15px 0;
		font-size: 14px;
		color: #999;
	}
	
	.empty-btn {
		background-color: #2196F3;
		color: #fff;
		padding: 8px 20px;
		border-radius: 16px;
		
		.empty-btn-text {
			font-size: 12px;
			color: #fff;
		}
	}
}

.summary-section {
	background-color: #fff;
	margin: 0 20px 20px;
	border-radius: 12px;
	padding: 15px;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	
	.summary-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.summary-label {
			font-size: 12px;
			color: #666;
			margin-bottom: 5px;
		}
		
		.summary-value {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			
			&.return-text {
				color: #f44336;
			}
		}
	}
}

.fab-container {
	position: fixed;
	right: 20px;
	bottom: 30px;
	display: flex;
	flex-direction: column;
	
	.fab-btn {
		width: 50px;
		height: 50px;
		background-color: #2196F3;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
		
		&:active {
			transform: scale(0.95);
		}
	}
}

.detail-popup {
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid #f0f0f0;
		
		.popup-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		
		.popup-close {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.popup-content {
		padding: 20px;
		
		.detail-item {
			display: flex;
			align-items: center;
			padding: 12px 0;
			border-bottom: 1px solid #f8f9fa;
			
			.detail-label {
				width: 100px;
				font-size: 14px;
				color: #666;
			}
			
			.detail-value {
				flex: 1;
				font-size: 14px;
				color: #333;
				
				&.return-text {
					color: #f44336;
				}
			}
		}
	}
}
</style>
